<template>
    <div>
        <el-drawer title="邮件详情" v-model="drawerShow" 
            direction="rtl" :before-close="handleClose" :size="900"
            :close-on-click-modal="false">
            <div class="detail_container" v-loading="isLoading">

                <div class="detail_title">
                    <h3>{{ emailDetailInfo.title || '-' }}</h3>
                </div>

                <div class="detail_item">
                    <span>发件人：</span>
                    <el-tag type="warning">{{ emailDetailInfo.senderName || '-' }}</el-tag>
                </div>

                <div class="detail_item">
                    <span>时间：</span>
                    <p>{{ formatDate.dateTimeAllFormat( emailDetailInfo.sendTime || '') }}</p>
                </div>

                <div class="detail_item">
                    <span>收件人：</span>
                    <div style="width: 850px;">
                        <el-tag v-for="item in emailDetailInfo.receiversList" class="margin-right-sm margin-bottom-sm">{{ item }}</el-tag>
                    </div>
                </div>

                <div class="detail_item" v-if="emailDetailInfo.ccList && emailDetailInfo.ccList.length">
                    <span>抄送人：</span>
                    <div style="width: 850px;">
                        <el-tag v-for="item in emailDetailInfo.ccList" class="margin-right-sm margin-bottom-sm">{{ item }}</el-tag>
                    </div>
                </div>

                <div class="detail_content">
                    <div class="content">
                        <div v-html="emailDetailInfo.richText" class="ql-editor"></div>
                    </div>
                </div>

                <div class="file_list" v-if="emailDetailInfo.fileList && emailDetailInfo.fileList.length">
                    <h3>附件信息</h3>
                    <ul>
                        <li v-for="fItem in emailDetailInfo.fileList" class="flex margin-bottom-sm file_item">
                            <i class="icon-base icon-base-appendix" 
                                style="font-size: 20px;margin-top: 2px;color: #27A3FF;margin-right: 10px;"></i>
                            <p style="width: 450px;color: #999;font-size: 14px;">{{ fItem.name }}</p>
                            <el-button link type="primary" @click="downLoadFile(fItem)">下 载</el-button>
                        </li>
                    </ul>
                </div>
                <div class="quote_email" v-if="emailDetailInfo.quoteMailId">
                    <h3>引用邮件</h3>
                    <div class="width-all margin-bottom-md">
                        <el-button link type="primary">
                            <i class="icon-base icon-base-quote margin-right-sm"></i>{{ emailQuoteDetailInfo.title }}
                        </el-button>
                        <el-button link type="primary" class="margin-left-md" @click="isShowQuoteContent = !isShowQuoteContent">
                            <i :class="[ 'icon-base margin-right-sm', !isShowQuoteContent ? ' icon-base-arrow-down-bold' : 'icon-base-arrow-up-bold' ]"></i>
                            {{ !isShowQuoteContent ? '展开' : '收起' }}
                        </el-button>
                    </div>
                    <div style="border: 1px solid #eee;padding: 10px;width: 100%;" v-if="isShowQuoteContent">
                        <div class="detail_item">
                            <span>发件人：</span>
                            <el-tag type="warning">{{ emailQuoteDetailInfo.senderName || '-' }}</el-tag>
                        </div>
                        <div class="detail_item">
                            <span>时间：</span>
                            <p>{{ formatDate.dateTimeAllFormat( emailQuoteDetailInfo.sendTime || '') }}</p>
                        </div>
                        <div class="detail_item">
                            <span>收件人：</span>
                            <div style="width: 800px;">
                                <el-tag v-for="item in emailQuoteDetailInfo.receiversList" class="margin-right-sm margin-bottom-sm">{{ item }}</el-tag>
                            </div>
                        </div>
                        <div class="detail_item" v-if="emailQuoteDetailInfo.ccList && emailQuoteDetailInfo.ccList.length">
                            <span>抄送人：</span>
                            <div style="width: 800px;">
                                <el-tag v-for="item in emailQuoteDetailInfo.ccList" class="margin-right-sm margin-bottom-sm">{{ item }}</el-tag>
                            </div>
                        </div>
                        <div class="detail_content">
                            <div class="content">
                                <div v-html="emailQuoteDetailInfo.richText" class="ql-editor"></div>
                            </div>
                        </div>
                        <div class="file_list" v-if="emailQuoteDetailInfo.fileList && emailQuoteDetailInfo.fileList.length">
                            <h3>附件信息</h3>
                            <ul>
                                <li v-for="fItem in emailQuoteDetailInfo.fileList" class="flex margin-bottom-sm file_item">
                                    <i class="icon-base icon-base-appendix" 
                                        style="font-size: 20px;margin-top: 2px;color: #27A3FF;margin-right: 10px;"></i>
                                    <p style="width: 450px;color: #999;font-size: 14px;">{{ fItem.name }}</p>
                                    <el-button link type="primary" @click="downLoadFile(fItem)">下 载</el-button>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <template #footer>
                <div class="dialog-footer flex space-between">
                    <el-button @click="handleClose">关 闭</el-button>
                    <div>
                        <el-button type="danger" @click="removeEmail">删 除</el-button>
                        <el-button type="warning" @click="forwardEmail">转 发</el-button>
                        <el-button type="primary" @click="replyEmail">回 复</el-button>
                    </div>
                </div>
            </template>
        </el-drawer>
    </div>
</template>
<script setup>
    import { ref, watch } from "vue"
    import { readEmailDetail} from "@/api/email.js"
    import { formatDate } from "@/utils/fomart"
    const props = defineProps(['show', 'data', 'state']);
    const emit = defineEmits(['update:show', 'submit', 'remove', 'forward', 'reply', 'close']);
    const drawerShow = ref(false);
    const isLoading = ref(false);
    const isShowQuoteContent = ref(false);
    const emailDetailInfo = ref({richText: '<p></p>'});
    const emailQuoteDetailInfo = ref({richText: '<p></p>'});
    watch(() => props.show, () => {
        drawerShow.value = props.show;
        if(drawerShow.value) getEmailDetail();
    }, { deep: true });

    const downLoadFile = (item) => {
        window.open(item.url);
    };
    const removeEmail = () => {
        emit('remove', emailDetailInfo.value);
    };
    const forwardEmail = () => {
        emit('forward', emailDetailInfo.value);
    };
    const replyEmail = () => {
        emit('reply', emailDetailInfo.value);
    };
    const handleClose = () => {
        drawerShow.value = false;
        emit('update:show', false);
        emit('close')
    };
    const dataReorganization = (detailInfo) => {
        let detailData = {
            id: detailInfo.id || '',
            title: detailInfo.title || '-',
            richText: detailInfo.content || '<p></p>',
            sender: detailInfo.sender || '-',
            senderName: detailInfo.senderName || '-',
            sendTime: detailInfo.sendTime || new Date(),
            quoteMailId: detailInfo.quoteMailId || '',
            receiversList: detailInfo.receivers ? detailInfo.receivers.split(';') : [],
            ccList: detailInfo.cc ? detailInfo.cc.split(';') : [],
            fileList: []
        }
        detailData.receiversList.pop();
        detailData.ccList.pop();
        const fileNames = detailInfo.attachName ? detailInfo.attachName.split(';') : [];
        const fileUrls = detailInfo.attach ? detailInfo.attach.split(',') : [];
        fileUrls.map( (item, index) => {
            const obj = { name: fileNames[index], url: item }
            detailData.fileList.push(obj);
        });
        return detailData
    };
    const getEmailDetail = () => {
        isLoading.value = true;
        readEmailDetail({
            id: props.data.id,
            mailId: props.data.mailId,
            readFlg: props.data.readFlg,
        }).then(res => {
            isLoading.value = false;
            const data = res.data || {}
            const detailInfo = dataReorganization(data || {});
            emailDetailInfo.value = detailInfo
            const { quoteMailId } = data;
            if(quoteMailId){
                getQuoteEmailDetail(quoteMailId);
            }
        });
    };
    const getQuoteEmailDetail = (quoteMailId) => {
        readEmailDetail({
            mailId: quoteMailId,
            readFlg: 'Y',
        }).then(res => {
            const data = res.data || {}
            const detailInfo = dataReorganization(data || {});
            emailQuoteDetailInfo.value = detailInfo
            console.log('emailQuoteDetailInfo.value', emailQuoteDetailInfo.value);
        })
    }
    defineExpose({handleClose});
</script>
<style scoped lang="scss">
    :deep(.el-drawer__body){
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
        padding: 10px 20px;
    }
    :deep(.ql-editor img){
        width: 100%;
    }
    .detail_container{
        p{
            font-size: 14px;
            padding: 3px 0;
        }
        .file_list{
            padding-top: 5px;
            h3{
                font-size: 16px;
                margin-bottom: 10px;
            }
            .file_item{
                width: 480px;
                cursor: pointer;
                border-radius: 5px;
            }
            .file_item:hover{
                background-color: #f2f2f2;
            }
        }
    }
    .detail_title{
        display: flex;
        margin-top: 5px;
        margin-bottom: 10px;
    }
    .detail_item{
        display: flex;
        font-size: 14px;
        margin-bottom: 5px;
        span:first-child{ 
            min-width: 60px;line-height: 24px;
            text-align: justify;text-align-last: justify;
            text-justify: distribute-all-lines;
        }
        p{
            color: #666;
            line-height: 20px;
        }
    }
    .detail_content{
        margin: 10px 0;
        border: 1px solid #eee;
        border-radius: 5px;
        min-height: 340px;
    }
    .quote_email{
        margin-top: 15px;
        h3{
            font-size: 16px;
            margin-bottom: 10px;
        }
    }
</style>